<template>
  <leftRightSplit :left-span="4">
    <el-card slot="left" header="流程应用">
      <el-tree :data="appList" node-key="key" :default-expand-all="true" :props="defaultProps" @node-click="chioseApp" />
    </el-card>
    <el-card slot="right" :header="title">
      <div class="app-container">
        <el-form :inline="true" :model="queryParam">
          <el-form-item label="标题">
            <el-input
              v-model="queryParam.QueryKey"
              placeholder="标题"
              style="width: 200px"
              @change="search"
            />
          </el-form-item>
          <el-form-item label="经办人">
            <empInput v-model="queryParam.ToEmpId" placeholder="经办人" @change="search" />
          </el-form-item>
          <el-form-item label="审批结果">
            <enumItem
              v-model="queryParam.AuditStatus"
              :dic-key="EnumDic.FlowAuditStatus"
              placeholder="审批结果"
              :multiple="true"
              sys-head="flow"
              @change="search"
            />
          </el-form-item>
          <el-form-item label="流程状态">
            <enumItem
              v-model="queryParam.Status"
              :dic-key="EnumDic.FlowAuditLogStatus"
              placeholder="流程状态"
              sys-head="flow"
              @change="search"
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="queryParam.Begin" placeholder="开始日期" :clearable="true" value-format="yyyy-MM-dd" @change="search" />
            <span style="margin-left: 5px; margin-right: 5px;">至</span>
            <el-date-picker v-model="queryParam.End" placeholder="结束日期" :clearable="true" value-format="yyyy-MM-dd" @change="search" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="default"
              @click="reset()"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <w-table
        :data="logList"
        :columns="columns"
        :is-paging="true"
        row-key="Id"
        :paging="paging"
        @load="load"
      >
        <template slot="progressVal" slot-scope="e">
          <el-progress :text-inside="true" :stroke-width="20" :percentage="e.row.ProgressVal" />
        </template>
        <template slot="auditStatus" slot-scope="e">
          <span :style="{color: FlowAuditStatus[e.row.AuditStatus].color }"> {{ FlowAuditStatus[e.row.AuditStatus].text }}</span>
        </template>
        <template slot="curItem" slot-scope="e">
          <div v-if="e.row.CurItem">
            <span v-for="(i,index) in e.row.CurItem" :key="i.NodeId" class="rowSpan">
              {{ (index +1) + '，' + i.NodeName + i.Show }} {{ i.EmpName }}
            </span>
          </div>
        </template>
        <template slot="status" slot-scope="e">
          <span v-if="e.row.Status == 0" style="color: #909399">待开始</span>
          <span v-else-if="e.row.Status == 1" style="color: #409EFF">进行中</span>
          <template v-else-if="e.row.Status == 2">
            <span class="rowSpan" style="color: #67C23A">已结束</span>
            <span class="rowSpan">{{ e.row.EndEmp }}</span>
            <span class="rowSpan">{{ moment(e.row.EndTime).format('YYYY-MM-DD HH:mm') }}</span>
          </template>
        </template>
        <template slot="createBy" slot-scope="e">
          <span class="rowSpan">{{ e.row.CreateName }}</span>
          <span class="rowSpan">{{ moment(e.row.CreateTime).format('YYYY-MM-DD HH:mm') }}</span>
        </template>
        <template slot="action" slot-scope="e">
          <el-button
            size="mini"
            type="primary"
            title="查看"
            icon="el-icon-view"
            circle
            @click="show(e.row)"
          />
          <el-button
            v-if="e.row.Status != 2 && checkPower('flow.aduit.close')"
            size="mini"
            type="danger"
            title="关闭流程"
            icon="el-icon-close"
            circle
            @click="cancel(e.row)"
          />
        </template>
      </w-table>
      <flowAuditLog :log-id="id" :visible.sync="visible" />
    </el-card>
  </leftrightsplit>
</template>

<script>
import moment from 'moment'
import { EnumDic, FlowAuditStatus } from '../../config/flowConfig'
import { GetList } from '@/flow/api/flowApp'
import * as auditLogApi from '@/flow/api/auditLog'
import empInput from '@/components/emp/empInput.vue'
import flowAuditLog from '@/flow/components/audit/flowAuditLog'
export default {
  components: {
    empInput,
    flowAuditLog
  },
  data() {
    return {
      EnumDic,
      FlowAuditStatus,
      appList: [],
      logList: [],
      title: '所有流程',
      id: null,
      visible: false,
      queryParam: {
        Status: null,
        QueryKey: null,
        AppId: null,
        AuditStatus: null,
        Begin: null,
        End: null,
        ToEmpId: null
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      columns: [
        {
          key: 'DocTitle',
          title: '标题',
          align: 'left',
          minWidth: 200
        },
        {
          key: 'ProgressVal',
          title: '进度',
          align: 'right',
          slotName: 'progressVal',
          width: 150,
          sortable: 'custom'
        },
        {
          key: 'CreateBy',
          title: '发起人',
          align: 'center',
          slotName: 'createBy',
          sortable: 'custom',
          minWidth: 150
        },
        {
          key: 'AuditStatus',
          title: '审批结果',
          align: 'center',
          slotName: 'auditStatus',
          width: 150,
          sortable: 'custom'
        },
        {
          key: 'Status',
          title: '流程状态',
          align: 'center',
          slotName: 'status',
          width: 160,
          sortable: 'custom'
        },
        {
          key: 'CurItem',
          title: '进行中的节点',
          align: 'left',
          slotName: 'curItem',
          minWidth: 150
        },
        {
          key: 'Action',
          title: '操作',
          align: 'left',
          width: 200,
          slotName: 'action'
        }
      ],
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'Id',
        IsDesc: false,
        Total: 0
      },
      rolePower: [
        'flow.aduit.close'
      ]
    }
  },
  computed: {},
  mounted() {
    this.initPower()
    this.loadApp()
    this.load()
  },
  methods: {
    moment,
    show(row) {
      this.id = row.Id
      this.visible = true
    },
    async initPower() {
      this.rolePower = await this.$checkPower(this.rolePower)
    },
    checkPower(power) {
      return this.rolePower.includes(power)
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.AuditStatus = null
      this.queryParam.Status = null
      this.queryParam.ToEmpId = null
      this.queryParam.Begin = null
      this.queryParam.End = null
      this.paging.Index = 1
      this.load()
    },
    chioseApp(app) {
      if (app == null || app.type === 'dir') {
        this.title = '所有流程'
        this.queryParam.AppId = null
      } else {
        this.title = app.label
        this.queryParam.AppId = app.key
      }
      this.reset()
    },
    async loadApp() {
      const res = await GetList(null)
      this.appList = res.map(c => {
        return {
          key: c.Value,
          label: c.Text,
          type: 'dir',
          children: c.AppList.map(a => {
            return {
              key: a.Id,
              label: a.AppName,
              type: 'app'
            }
          })
        }
      })
    },
    search() {
      this.paging.Index = 1
      this.load()
    },
    async load() {
      const res = await auditLogApi.Query(this.queryParam, this.paging)
      if (res.List) {
        res.List.forEach(a => {
          if (a.CurItem) {
            a.CurItem.forEach(c => {
              if (c.NodeType === 0) {
                c.Show = '[开始]'
              } else if (c.NodeType === 2) {
                c.Show = '[循环审批]'
              } else if (c.AuditType === 2) {
                c.Show = '[会审]'
              } else if (c.AuditType === 1) {
                c.Show = '[独立]'
              } else {
                c.Show = ''
              }
            })
          }
        })
        this.logList = res.List
      } else {
        this.logList = []
      }
      this.paging.Total = res.Count
    },
    cancel(row) {
      const title =
        '确认关闭流程:' + row.DocTitle + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitCancel(row.Id)
      })
    },
    async submitCancel(id) {
      await auditLogApi.Cancel(id)
      this.$message({
        type: 'success',
        message: '取消成功!'
      })
      this.reset()
    }
  }
}
</script>
<style scoped>
.rowSpan {
    display: inline-block;
    width: 100%;
    height: 20px;
    line-height: 20px;
}
</style>
